<template>
    <div v-show="show">
      v-show
    </div>
    <button @click="showInfo">{{ content }}</button>

    <div v-for="item in click">
        <p>索引:{{ item.Cid }} 姓名:{{item.Cname  }} 年龄:{{ item.Cage }}</p>
    </div>


    <!-- v-text:内置指令 更新元素的文本内容 -->
    <span v-text="name1"></span>
    <h1 v-text="name"></h1>

</template>

<script setup lang="ts">
import { ref } from 'vue'

const show=ref(true);
const content=ref("隐藏");

function showInfo(){
    show.value=false,
    content.value="显示"
}


const click=[{
    Cid:"0",
    Cname:"张三",
    Cage:"18"
},
{
    Cid:"1",
    Cname:"李四",
    Cage:"19"
},
{
    Cid:"2",
    Cname:"王五",
    Cage:"20"
}]

const name1="<h1>双向数据绑定演示</h1>";
const name="双向数据绑定演示";
</script>